<template>
	<view class="container">
		<!-- 订单信息卡片 -->
		<view class="order-card">
			<view class="order-header">
				<text class="order-title">服务订单信息</text>
				<view class="order-status" :class="statusClass">
					<text class="status-dot"></text>
					<text class="status-text">{{ statusText }}</text>
				</view>
			</view>

			<!-- 宠物信息 -->
			<view class="pet-info">
				<image class="pet-avatar" :src="orderInfo.petAvatar" mode="aspectFill"></image>
				<view class="pet-details">
					<text class="pet-name">{{ orderInfo.petName }}</text>
					<text class="pet-desc">{{ orderInfo.petBreed }} · {{ orderInfo.petAge }}岁</text>
				</view>
			</view>

			<!-- 服务信息 -->
			<view class="service-info">
				<view class="info-row">
					<text class="info-label">🕒 服务时间</text>
					<text class="info-value">{{ orderInfo.serviceTime }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">📍 服务地址</text>
					<text class="info-value">{{ orderInfo.address }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">📋 服务内容</text>
					<text class="info-value">{{ orderInfo.serviceType }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">💰 服务报酬</text>
					<text class="info-value price">¥{{ orderInfo.price }}</text>
				</view>
			</view>

			<!-- 特殊要求 -->
			<view class="special-notes" v-if="orderInfo.specialNotes">
				<text class="notes-title">⚠️ 特殊注意事项</text>
				<text class="notes-content">{{ orderInfo.specialNotes }}</text>
			</view>
		</view>

		<!-- 宠物详细信息 -->
		<view class="detail-card">
			<text class="card-title">🐾 宠物详细信息</text>
			
			<view class="detail-item" v-if="orderInfo.petHabits">
				<text class="detail-label">生活习惯</text>
				<text class="detail-content">{{ orderInfo.petHabits }}</text>
			</view>

			<view class="detail-item" v-if="orderInfo.petFood">
				<text class="detail-label">饮食偏好</text>
				<text class="detail-content">{{ orderInfo.petFood }}</text>
			</view>

			<view class="detail-item" v-if="orderInfo.petHealth">
				<text class="detail-label">健康状况</text>
				<text class="detail-content">{{ orderInfo.petHealth }}</text>
			</view>
		</view>

		<!-- 服务证明上传 -->
		<view class="upload-card" v-if="canUpload">
			<text class="card-title">📸 服务证明上传</text>
			<text class="upload-hint">请上传服务过程照片或视频，让主人更放心</text>

			<!-- 照片上传 -->
			<view class="upload-section">
				<text class="section-label">服务照片（至少3张）</text>
				<view class="upload-grid">
					<view class="upload-item" v-for="(img, index) in servicePhotos" :key="index">
						<image class="upload-preview" :src="img" mode="aspectFill"></image>
						<view class="delete-btn" @click="deletePhoto(index)">×</view>
					</view>
					<view class="upload-btn" @click="uploadPhoto" v-if="servicePhotos.length < 9">
						<text class="upload-icon">📷</text>
						<text class="upload-text">添加照片</text>
					</view>
				</view>
				<text class="tip-text">最多上传9张，建议包含喂食、遛狗、宠物状态等照片</text>
			</view>

			<!-- 视频上传 -->
			<view class="upload-section">
				<text class="section-label">服务视频（可选）</text>
				<view class="video-upload">
					<video 
						v-if="serviceVideo" 
						class="video-preview" 
						:src="serviceVideo"
						controls></video>
					<view v-else class="video-upload-btn" @click="uploadVideo">
						<text class="upload-icon">🎬</text>
						<text class="upload-text">上传视频</text>
					</view>
					<view v-if="serviceVideo" class="delete-video" @click="deleteVideo">删除视频</view>
				</view>
				<text class="tip-text">视频大小不超过50MB，时长建议1-3分钟</text>
			</view>

			<!-- 服务说明 -->
			<view class="upload-section">
				<text class="section-label">服务说明 <text class="required">*</text></text>
				<textarea 
					class="service-textarea" 
					v-model="serviceDesc" 
					placeholder="请描述服务过程和宠物状态，如：已完成喂食和遛狗，宠物状态良好，非常活泼"
					maxlength="300" />
				<text class="char-count">{{ serviceDesc.length }}/300</text>
			</view>
		</view>

		<!-- 服务证明展示（已提交） -->
		<view class="proof-display" v-if="!canUpload && servicePhotos.length > 0">
			<text class="card-title">✅ 已提交的服务证明</text>
			
			<view class="photo-grid">
				<image 
					class="proof-photo" 
					v-for="(img, index) in servicePhotos" 
					:key="index"
					:src="img" 
					mode="aspectFill"
					@click="previewPhoto(index)"></image>
			</view>

			<video 
				v-if="serviceVideo" 
				class="proof-video" 
				:src="serviceVideo"
				controls></video>

			<view class="proof-desc">
				<text class="desc-label">服务说明：</text>
				<text class="desc-content">{{ serviceDesc }}</text>
			</view>
		</view>

		<!-- 联系主人 -->
		<view class="contact-card">
			<button class="contact-btn" @click="contactOwner">
				<text class="btn-icon">💬</text>
				<text>联系主人</text>
			</button>
		</view>

		<!-- 底部操作按钮 -->
		<view class="footer-actions" v-if="canUpload">
			<button class="save-draft-btn" @click="saveDraft">保存草稿</button>
			<button class="submit-btn" @click="submitService">提交完成</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderId: null,
			orderInfo: {
				petName: '橘猫咪咪',
				petBreed: '中华田园猫',
				petAge: 3,
				petAvatar: '/static/cat1.png',
				serviceTime: '2024-01-15 下午 2:00-3:00',
				address: '朝阳区望京SOHO 3号楼',
				serviceType: '喂食 + 遛猫',
				price: 80,
				specialNotes: '咪咪比较怕生，请轻声说话，喂食后需要陪玩10分钟',
				petHabits: '喜欢晒太阳，喜欢玩逗猫棒，下午4点左右最活跃',
				petFood: '每餐80g猫粮+50ml水，不吃鱼类',
				petHealth: '健康状况良好，已绝育，已接种疫苗'
			},
			status: 'in_progress', // pending, in_progress, submitted, completed
			servicePhotos: [],
			serviceVideo: '',
			serviceDesc: ''
		}
	},
	computed: {
		canUpload() {
			return this.status === 'in_progress'
		},
		statusText() {
			const statusMap = {
				'pending': '待开始',
				'in_progress': '服务中',
				'submitted': '待确认',
				'completed': '已完成'
			}
			return statusMap[this.status] || '未知'
		},
		statusClass() {
			return `status-${this.status}`
		}
	},
	onLoad(options) {
		if (options.orderId) {
			this.orderId = options.orderId
			this.loadOrderInfo()
		}
		this.loadDraft()
	},
	methods: {
		// 加载订单信息
		loadOrderInfo() {
			// 模拟从服务器加载订单信息
			console.log('加载订单信息:', this.orderId)
		},

		// 加载草稿
		loadDraft() {
			const draft = uni.getStorageSync(`service_draft_${this.orderId}`)
			if (draft) {
				this.servicePhotos = draft.photos || []
				this.serviceVideo = draft.video || ''
				this.serviceDesc = draft.desc || ''
			}
		},

		// 上传照片
		uploadPhoto() {
			uni.chooseImage({
				count: 9 - this.servicePhotos.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.servicePhotos = [...this.servicePhotos, ...res.tempFilePaths]
					uni.showToast({
						title: '照片添加成功',
						icon: 'success'
					})
				}
			})
		},

		// 删除照片
		deletePhoto(index) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这张照片吗？',
				success: (res) => {
					if (res.confirm) {
						this.servicePhotos.splice(index, 1)
					}
				}
			})
		},

		// 上传视频
		uploadVideo() {
			uni.chooseVideo({
				sourceType: ['album', 'camera'],
				maxDuration: 180,
				camera: 'back',
				success: (res) => {
					const size = res.size / 1024 / 1024 // MB
					if (size > 50) {
						uni.showToast({
							title: '视频大小不能超过50MB',
							icon: 'none'
						})
						return
					}
					this.serviceVideo = res.tempFilePath
					uni.showToast({
						title: '视频添加成功',
						icon: 'success'
					})
				}
			})
		},

		// 删除视频
		deleteVideo() {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个视频吗？',
				success: (res) => {
					if (res.confirm) {
						this.serviceVideo = ''
					}
				}
			})
		},

		// 预览照片
		previewPhoto(index) {
			uni.previewImage({
				urls: this.servicePhotos,
				current: index
			})
		},

		// 保存草稿
		saveDraft() {
			const draft = {
				photos: this.servicePhotos,
				video: this.serviceVideo,
				desc: this.serviceDesc
			}
			uni.setStorageSync(`service_draft_${this.orderId}`, draft)
			uni.showToast({
				title: '草稿已保存',
				icon: 'success'
			})
		},

		// 提交服务完成
		submitService() {
			// 验证必填项
			if (this.servicePhotos.length < 3) {
				uni.showToast({
					title: '请至少上传3张服务照片',
					icon: 'none'
				})
				return
			}

			if (!this.serviceDesc) {
				uni.showToast({
					title: '请填写服务说明',
					icon: 'none'
				})
				return
			}

			uni.showModal({
				title: '确认提交',
				content: '确认已完成服务并提交证明？提交后将等待主人确认',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({ title: '提交中...' })

						// 模拟上传
						setTimeout(() => {
							uni.hideLoading()
							
							// 清除草稿
							uni.removeStorageSync(`service_draft_${this.orderId}`)
							
							// 更新状态
							this.status = 'submitted'

							uni.showToast({
								title: '提交成功',
								icon: 'success'
							})

							// 3秒后返回订单列表
							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						}, 2000)
					}
				}
			})
		},

		// 联系主人
		contactOwner() {
			uni.navigateTo({
				url: `/pages/chat/chat?userId=${this.orderInfo.ownerId}`
			})
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #F0F8FF 0%, #FFF0F5 100%);
	padding: 30rpx;
	padding-bottom: 200rpx;
}

/* 订单信息卡片 */
.order-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.order-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #F0F0F0;
}

.order-title {
	font-size: 30rpx;
	font-weight: 700;
	color: #333333;
}

.order-status {
	display: flex;
	align-items: center;
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	background: #F5F5F5;
}

.status-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background: #999999;
	margin-right: 10rpx;
}

.status-in_progress .status-dot {
	background: #FF8C42;
}

.status-submitted .status-dot {
	background: #4CAF50;
}

.status-completed .status-dot {
	background: #2196F3;
}

.status-text {
	font-size: 24rpx;
	color: #666666;
	font-weight: 600;
}

/* 宠物信息 */
.pet-info {
	display: flex;
	align-items: center;
	margin-bottom: 25rpx;
	padding: 20rpx;
	background: linear-gradient(135deg, rgba(255, 182, 193, 0.1) 0%, rgba(152, 228, 214, 0.1) 100%);
	border-radius: 20rpx;
}

.pet-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	border: 3rpx solid #FFFFFF;
}

.pet-details {
	flex: 1;
}

.pet-name {
	font-size: 28rpx;
	font-weight: 700;
	color: #333333;
	display: block;
	margin-bottom: 8rpx;
}

.pet-desc {
	font-size: 24rpx;
	color: #666666;
}

/* 服务信息 */
.service-info {
	margin-bottom: 20rpx;
}

.info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15rpx 0;
	border-bottom: 1rpx solid #F5F5F5;
}

.info-row:last-child {
	border-bottom: none;
}

.info-label {
	font-size: 26rpx;
	color: #666666;
}

.info-value {
	font-size: 26rpx;
	color: #333333;
	font-weight: 600;
	text-align: right;
	flex: 1;
	margin-left: 20rpx;
}

.info-value.price {
	color: #FF8C42;
	font-size: 30rpx;
}

/* 特殊注意事项 */
.special-notes {
	background: rgba(255, 140, 66, 0.1);
	border-radius: 20rpx;
	padding: 20rpx;
	margin-top: 20rpx;
}

.notes-title {
	font-size: 26rpx;
	color: #FF8C42;
	font-weight: 700;
	display: block;
	margin-bottom: 10rpx;
}

.notes-content {
	font-size: 24rpx;
	color: #666666;
	line-height: 1.6;
}

/* 详细信息卡片 */
.detail-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.card-title {
	font-size: 28rpx;
	font-weight: 700;
	color: #333333;
	display: block;
	margin-bottom: 20rpx;
}

.detail-item {
	margin-bottom: 20rpx;
	padding: 20rpx;
	background: #F9F9F9;
	border-radius: 15rpx;
}

.detail-item:last-child {
	margin-bottom: 0;
}

.detail-label {
	font-size: 24rpx;
	color: #999999;
	display: block;
	margin-bottom: 8rpx;
}

.detail-content {
	font-size: 26rpx;
	color: #333333;
	line-height: 1.6;
}

/* 上传卡片 */
.upload-card {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.upload-hint {
	font-size: 24rpx;
	color: #999999;
	display: block;
	margin-bottom: 25rpx;
}

.upload-section {
	margin-bottom: 30rpx;
}

.upload-section:last-child {
	margin-bottom: 0;
}

.section-label {
	font-size: 26rpx;
	color: #333333;
	font-weight: 600;
	display: block;
	margin-bottom: 15rpx;
}

.required {
	color: #FF4444;
}

/* 照片上传 */
.upload-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
	margin-bottom: 15rpx;
}

.upload-item {
	width: 200rpx;
	height: 200rpx;
	position: relative;
}

.upload-preview {
	width: 100%;
	height: 100%;
	border-radius: 15rpx;
}

.delete-btn {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	width: 40rpx;
	height: 40rpx;
	background: #FF4444;
	color: #FFFFFF;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	font-weight: 700;
}

.upload-btn {
	width: 200rpx;
	height: 200rpx;
	background: #F5F5F5;
	border-radius: 15rpx;
	border: 2rpx dashed #CCCCCC;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.upload-icon {
	font-size: 48rpx;
	margin-bottom: 10rpx;
}

.upload-text {
	font-size: 24rpx;
	color: #999999;
}

.tip-text {
	font-size: 22rpx;
	color: #999999;
	line-height: 1.5;
}

/* 视频上传 */
.video-upload {
	margin-bottom: 15rpx;
}

.video-preview {
	width: 100%;
	height: 400rpx;
	border-radius: 15rpx;
}

.video-upload-btn {
	width: 100%;
	height: 300rpx;
	background: #F5F5F5;
	border-radius: 15rpx;
	border: 2rpx dashed #CCCCCC;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.delete-video {
	text-align: center;
	font-size: 24rpx;
	color: #FF4444;
	margin-top: 15rpx;
}

/* 服务说明 */
.service-textarea {
	width: 100%;
	min-height: 200rpx;
	background: #F5F5F5;
	border-radius: 15rpx;
	padding: 20rpx;
	font-size: 26rpx;
	line-height: 1.6;
}

.char-count {
	font-size: 22rpx;
	color: #999999;
	text-align: right;
	display: block;
	margin-top: 10rpx;
}

/* 证明展示 */
.proof-display {
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.photo-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
	margin-bottom: 20rpx;
}

.proof-photo {
	width: 200rpx;
	height: 200rpx;
	border-radius: 15rpx;
}

.proof-video {
	width: 100%;
	height: 400rpx;
	border-radius: 15rpx;
	margin-bottom: 20rpx;
}

.proof-desc {
	background: #F9F9F9;
	border-radius: 15rpx;
	padding: 20rpx;
}

.desc-label {
	font-size: 24rpx;
	color: #999999;
	display: block;
	margin-bottom: 10rpx;
}

.desc-content {
	font-size: 26rpx;
	color: #333333;
	line-height: 1.6;
}

/* 联系主人 */
.contact-card {
	margin-bottom: 20rpx;
}

.contact-btn {
	width: 100%;
	height: 90rpx;
	background: linear-gradient(135deg, #98E4D6 0%, #7FCDCD 100%);
	color: #FFFFFF;
	border-radius: 24rpx;
	font-size: 28rpx;
	font-weight: 700;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx rgba(152, 228, 214, 0.3);
}

.btn-icon {
	font-size: 32rpx;
	margin-right: 10rpx;
}

/* 底部操作 */
.footer-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #FFFFFF;
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
	display: flex;
	gap: 20rpx;
}

.save-draft-btn {
	flex: 1;
	height: 90rpx;
	background: #F5F5F5;
	color: #666666;
	border-radius: 24rpx;
	font-size: 28rpx;
	font-weight: 600;
	border: none;
}

.submit-btn {
	flex: 2;
	height: 90rpx;
	background: linear-gradient(135deg, #FFB6C1 0%, #FF91A4 100%);
	color: #FFFFFF;
	border-radius: 24rpx;
	font-size: 28rpx;
	font-weight: 700;
	border: none;
	box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.3);
}
</style>
